<template>
  <el-dialog
    :title="row.status === 0 ? '确认启用' : '确认停用'"
    :visible="dialogVisible"
    width="30%"
    @close="close"
  >
    <span>确定要{{ isStatus }}：{{ row.name }}吗？</span>
    <div slot="footer" class="labelbutton">
      <button class="penpel resetbutton" @click="close">取消</button>
      <button class="penpel searchbutton" @click="updateLocation">确认</button>
    </div>
  </el-dialog>
</template>

<script>
import { updateLocation } from '@/api/location'
export default {
  name: 'StatusDialog',
  data () {
    return {
      row: {}
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    // 判断按钮
    isStatus () {
      if (this.row.status === 0) return '启用'
      return '停用'
    }
  },
  methods: {
    close () {
      this.$emit('update:dialogVisible', false)
    },
    async updateLocation () {
      const status = (this.row.status === 0 ? '1' : '0')
      await updateLocation({ id: this.row.id, status })
      this.$message.success('操作成功')
      this.close()
      this.$emit('updataArea')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .labelbutton {
    text-align: right;
    .penpel{
      @include penpel
    }
    .searchbutton {
      @include searchbutton;
    }
    .resetbutton {
      @include resetbutton;
      margin-right: 20px;
    }
  }
</style>
